﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>选人</title>
    <meta charset="utf-8" />
    <link href="/less/Default/css/bootstrap.css" type="text/css" rel="stylesheet" />
    <link href="/less/Default/css/bootstrap-theme.css" type="text/css" rel="stylesheet" />
    <link href="/less/Default/css/font-awesome.css" type="text/css" rel="stylesheet" />
    <link href="/less/Default/css/style.css" type="text/css" rel="stylesheet" />
    <link href="mCustomScrollbar/jquery.mCustomScrollbar.css" rel="stylesheet" />
    <link href="select2/select2.css" rel="stylesheet" />

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="/js/BsIE/html5shiv.js"></script>
    <script src="/js/BsIE/respond.js"></script>
    <![endif]-->
    <base target="_self">
</head>
<body>
    <div class="select-panel">
        <div class="select-nav">
            <ul class="clearfix">
                <li><a class="active" id="chooseByDepart" href="javascript:void(0);" title="按单位/处室选择">按部分/处室选择</a></li>
                <li><a id="chooseByGroup" href="javascript:void(0);" title="按分组选择">按分组选择</a></li>
            </ul>
        </div>
        <div class="select-list clearfix">
            <div class="group-list pull-left">
                <div class="list-box depart-list">
                    <div class="agency-select">
                        <!--这里通过select实现-->
                        <input type="hidden" id="AgencyLists" />
                    </div>
                    <ul id="departList">
                        <li>
                            <a class="active" href="javascript:void(0);" title="全部好友">
                                <span>
                                    <input type="checkbox" title="全部好友" />办公室
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0);" title="全部好友">
                                <span>
                                    <input type="checkbox" title="全部好友" />局长办公室
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0);" title="全部好友">
                                <span>
                                    <input type="checkbox" title="全部好友" />法规处
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0);" title="全部好友">
                                <span>
                                    <input type="checkbox" title="全部好友" />审批处
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0);" title="全部好友">
                                <span>
                                    <input type="checkbox" title="全部好友" />综合协调处
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0);" title="全部好友">
                                <span>
                                    <input type="checkbox" title="全部好友" />督察应急处
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0);" title="全部好友">
                                <span>
                                    <input type="checkbox" title="全部好友" />食品安全监管处
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0);" title="全部好友">
                                <span>
                                    <input type="checkbox" title="全部好友" />保健食品化妆品监管处
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0);" title="全部好友">
                                <span>
                                    <input type="checkbox" title="全部好友" />药品建管处
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0);" title="全部好友">
                                <span>
                                    <input type="checkbox" title="全部好友" />医疗器械建管处
                                </span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="list-box">
                    <ul id="myGroupList">
                        <li>
                            <a href="javascript:void(0);" title="全部好友">
                                <span>
                                    <input type="checkbox" title="全部好友" />全部好友
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0);" title="全部好友">
                                <span>
                                    <input type="checkbox" title="全部好友" />全部好友
                                </span>
                            </a>

                        </li>
                    </ul>
                </div>
            </div>
            <div class="people-wrap">
                <div class="people-sort">
                    <ul class="clearfix">
                        <li><a href="javascript:void(0);" title="A">A</a></li>
                        <li><a href="javascript:void(0);" title="B">B</a></li>
                        <li><a href="javascript:void(0);" title="C">C</a></li>
                        <li><a href="javascript:void(0);" title="D">D</a></li>
                        <li><a href="javascript:void(0);" title="E">E</a></li>
                        <li><a href="javascript:void(0);" title="F">F</a></li>
                        <li><a href="javascript:void(0);" title="G">G</a></li>
                        <li><a href="javascript:void(0);" title="H">H</a></li>
                        <li><a href="javascript:void(0);" title="I">I</a></li>
                        <li><a href="javascript:void(0);" title="J">J</a></li>
                        <li><a href="javascript:void(0);" title="K">K</a></li>
                        <li><a href="javascript:void(0);" title="L">L</a></li>
                        <li><a href="javascript:void(0);" title="M">M</a></li>
                        <li><a href="javascript:void(0);" title="N">N</a></li>
                        <li><a href="javascript:void(0);" title="O">O</a></li>
                        <li><a href="javascript:void(0);" title="P">P</a></li>
                        <li><a href="javascript:void(0);" title="Q">Q</a></li>
                        <li><a href="javascript:void(0);" title="R">R</a></li>
                        <li><a href="javascript:void(0);" title="S">S</a></li>
                        <li><a href="javascript:void(0);" title="T">T</a></li>
                        <li><a href="javascript:void(0);" title="U">U</a></li>
                        <li><a href="javascript:void(0);" title="V">V</a></li>
                        <li><a href="javascript:void(0);" title="W">W</a></li>
                        <li><a href="javascript:void(0);" title="X">X</a></li>
                        <li><a href="javascript:void(0);" title="Y">Y</a></li>
                        <li><a href="javascript:void(0);" title="Z">Z</a></li>
                        <li><a class="clearfilter" href="javascript:void(0);" id="clearFilter" title="清除">清除</a></li>
                    </ul>
                </div>
                <div class="people-list">
                    <ul class="clearfix" id="peopleList">
                        <li>
                            <a href="javascript:void(0);">
                                <label data-id="333" data-name="张三" for="333"> <input id="333" type="checkbox" title="张三" />张三1</label>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">
                                <label data-id="3331" data-name="张三1" for="3331"> <input id="3331" type="checkbox" title="张三" />张三2</label>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="choose-list clearfix">
            <label class="choose-title">以选择人员：</label>
            <ul class="clearfix" id="chooseList">
                <li>
                    <a href="javascript:void(0);" title="明明">
                        明明<i class="icon  icon-remove"></i>
                    </a>
                </li>
            </ul>
        </div>

        <div class="select-btn">
            <input type="submit" id="selectSubmit" value="确定" class="btn btn-info" />
            <input type="button" id="selectCancel" value="取消" class="btn btn-cancel" />
        </div>
    </div>

    <!--JS代码-->
    <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
    <script src="mCustomScrollbar/jquery.mCustomScrollbar.js"></script>
    <script src="select2/select2.js"></script>
    <script src="handlebars.js"></script>
    <script type="text/x-handlebars-template" id="group-template">
        {{#each data}}
        <li>
            <a data-id="{{id}}" href="javascript:void(0);" title="{{text}}">
                <span>
                    <input data-id="{{id}}" type="checkbox" title="{{text}}" />{{text}}
                </span>
            </a>
        </li>
        {{/each}}
    </script>
    <script id="people-template" type="text/x-handlebars-template">
        {{#each data}}
        <li data-departid="{{depart}}">
            <a title="{{uname}}" href="javascript:void(0);">
                <label data-id="{{uid}}" data-name="{{uname}}"> <input id="{{uid}}" type="checkbox" title="{{uname}}" />{{uname}}</label>
            </a>
        </li>
        {{/each}}
    </script>
    <script>
        //选项卡
        (function () {
            var
                    $tabsNav = $(".select-nav"),
                    $tabsPanel = $(".group-list"),
                    $myGroup = $("#myGroupList");


            $tabsNav.find("li a").click(function () {
                var $this = $(this), $ind = $this.parent().index();
                $tabsNav.find("li a").removeClass("active");
                $this.addClass("active");

                $tabsPanel.find(".list-box").hide();
                $tabsPanel.find(".list-box").eq($ind).show();

                //获取单位或者分组列表
                if ($ind > 0) {
                    if ($myGroup.find("li").length > 0) return;
                    //获取我的分组
                    $.ajax({
                        url: "",
                        type: "POST",
                        data: {},
                        dataType: "",
                        success: function (data) {
                            loadDoneDepart(data, "group");
                        },
                        error: function (e) {
                            alert("获取我的分组列表失败:" + e);
                        }
                    });
                }

            });
        })();

        //页面初始化，获取部门/处室列表
        (function () {
            $.ajax({
                url: "tpl/Data-depart.js",
                type: "get",
                success: loadDoneUnit,
                error: function (e) {
                    alert("部门/处室数据获取失败：" + e);
                }
            });
        })();

        //获取单位处室,默认执行函数
        function loadDoneUnit() {
            var result = eval("(" + arguments[0] + ")");
            if (result == undefined || result == "" || result == null) return;

            //Select2 单位部门下拉框
            var $AgencyList = $("#AgencyLists");
            $AgencyList.select2({
                width: 125,
                allowClear: true,
                placeholder: "请选择一个单位",
                data: result.data,
                formatSelection: format,
                formatResult: format
            });

            $AgencyList.on("change", function (e) {

                var $departId = e.val;
                $.ajax({
                    url: "tpl/Data-departGroup.js",
                    type: "get",
                    success: loadDoneDepart,
                    error: function (e) {
                        alert("获取单位部门人员失败：" + e);
                    }
                });

            });

            function format(state) {
                if (!state.id) return state.text;//如果选项不存在ID，就是下拉的组节点optgroup
                return state.text;
            }

        }

        //获取部门或分组
        function loadDoneDepart(types) {

            var result = eval("(" + arguments[0] + ")"), $type = arguments[1];
            if (result == undefined || result == "" || result == null) return;

            //加载数据内容，渲染页面
            var
                    source = $("#group-template").html(),
                    template = Handlebars.compile(source);

            if ($type === "group") {
                $elem = $("#myGroupList");
            } else {
                $elem = $("#departList");
            }

            $elem.html(template(result));


            //部门或者我的分组事件
            var
                    $listBox = $(".list-box"),
                    $peoList = $("#peopleList");

            $listBox.delegate("li a", "click", function () {
                var $this = $(this);
                $listBox.find("a").removeClass("active");
                $this.addClass("active");

                $.ajax({
                    url: "tpl/Data-departPeo.js",
                    type: "get",
                    success: loadDepartPeo,
                    error: function (e) {
                        alert("获取人员列表失败:" + e);
                    }
                });
            });

            $listBox.delegate("li a input", "click", function () {
                var
                        $this = $(this),
                        $departid = $this.parents("a").attr("data-id");

                $.ajax({
                    url: "tpl/Data-departPeo.js",
                    type: "get",
                    success: loadDepartPeo,
                    error: function (e) {
                        alert("获取人员列表失败:" + e);
                    }
                });

                if ($this.is(":checked")) {
                    $this.parent("a").removeClass("active");
                    $peoList.find("li[data-departid=" + $departid + "] input").prop("checked", false);
                } else {
                    $this.parents("a").addClass("active");
                    $peoList.find("li[data-departid=" + $departid + "] input").prop("checked", true);
                }

            });

        }

        //获取一个单位下面的所有人员
        function loadDepartPeo() {



            var result = eval("(" + arguments[0] + ")");
            if (result == undefined || result == "" || result == null) return;

            //加载数据内容，渲染页面
            var
                    source = $("#people-template").html(),
                    template = Handlebars.compile(source),
                    $elem = $("#peopleList");

            $elem.html(template(result));


            //人员列表事件
            var
                    $peoList = $(".people-list"),
                    $choList = $("#chooseList");

            //把人员添加到，人员列表当中
            $peoList.delegate("li label", "click", function (e) {
                var
                        $this = $(this),
                        $name = $this.attr("data-name"),

                        $id = $this.attr("data-id"),
                        $flag = $this.find("input[type=checkbox]").is(":checked");

                if (e.target.type != "checkbox") {
                    $this.find(":checkbox").click(function () {
                        event.stopPropagation();
                    })
                }

                if (!$flag) {//选中
                    var cHtml = "<li data-id=" + $id + "><a data-id=" + $id + " href='javascript:void(0);' title=" + $name + ">" + $name;
                    cHtml += "<i class='icon  icon-remove'></i></a></li>";
                    $choList.append(cHtml);
                } else {
                    if ($choList.find("li[data-id=" + $id + "]")) {
                        $choList.find("li[data-id=" + $id + "]").remove();
                    }
                }

                $this.parent("a").toggleClass("active");

                e.stopPropagation();

            });

            //删除单个选中的人员
            $choList.delegate("li i", "click", function () {
                var
                        $this = $(this),
                        $id = $this.parents("li").attr("data-id"),
                        $elem = $peoList.find("label[data-id=" + $id + "] input");

                $elem.prop("checked", false);
                $elem.parents("a").removeClass("active");

                $this.parents("li").remove();

            });

        }

        //滚动条
        (function () {
            $('.people-list').mCustomScrollbar({
                theme: "dark",
                scrollInertia: 100
            });

            $(".list-box ul").mCustomScrollbar({
                theme: "dark",
                scrollInertia: 400
            });
        })();


        //确定选择
        var $selSubmit = $("#selectSubmit");
        $selSubmit.on("click", function () {
            var topWin = window.dialogArguments;

            //设置父窗口的指定位置的值
            window.dialogArguments.document.getElementById("showModalInput").value = "nihao";

            //关闭当前窗口
            window.close();
        });


        //关闭当前的弹出窗口
        var $selCancel = $("#selectCancel");
        $selCancel.on("click", function () {
            window.close();
        });

    </script>
</body>
</html>
